<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div class="app-container">
    <el-calendar ref="calendar">
      <template #header="{ date }">
        <span>Custom header content</span>
        <span>{{ date }}</span>
        <el-button-group>
          <el-button size="small" @click="selectDate('prev-month')">
            上个月
          </el-button>
          <el-button size="small" @click="selectDate('today')">今天</el-button>
          <el-button size="small" @click="selectDate('next-month')">
            下个月
          </el-button>
        </el-button-group>
      </template>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template #date-cell="{ data }">
        <div class="calendar-date" @click="openDialog('add', data)">
          <div class="calendar-body-header">
            {{ data.day.split("-").slice(1).join("-") }}
          </div>
          <!--已排版-->
          <template v-if="viewDate[data.day]">
            <div class="calendar-body-yes">
              <el-row> 张医生(08:30~18:30) </el-row>
              <el-row> 张医生(08:30~18:30) </el-row>
              <el-row> 张医生(08:30~18:30) </el-row>
            </div>
            <!--已排版-->
          </template>
          <!--未排版-->
          <template v-else>
            <div class="calendar-body-no">
              <el-icon>
                <EditPen />
              </el-icon>
            </div>
          </template>
        </div>
      </template>
    </el-calendar>
    <!-- 弹窗 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      :width="dialog.width"
      append-to-body
      @close="closeDialog"
    >
      <!--排版组-->
      <div class="depart-plan" v-for="(workPlanItem, index) in workPlanVOs">
        <!--医生列表（默认全部选中）-->
        <el-checkbox-group
          v-model="workPlanItem.workerIds"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="worker in allWorker"
            :key="worker.id"
            :label="worker.id"
            :value="worker.id"
            >{{ worker.name }}</el-checkbox
          >
        </el-checkbox-group>
        <!--排版列表-->
        <div>
          <el-time-select
            v-model="workPlanItem.timeFrom"
            style="width: 140px"
            :max-time="workPlanItem.timeEnd"
            class="mr-1"
            placeholder="Start time"
            :start="workPlanItem.timeFrom"
            step="00:15"
            :end="workPlanItem.timeEnd"
          />
          <el-time-select
            v-model="workPlanItem.timeEnd"
            style="width: 140px"
            :min-time="workPlanItem.timeFrom"
            placeholder="End time"
            :start="workPlanItem.timeFrom"
            step="00:15"
            :end="workPlanItem.timeEnd"
          />
        </div>
        <el-divider content-position="center">
          <el-button size="small" @click="addWorkPlan">新增时间段</el-button>
          <el-button
            size="small"
            @click="delWorkPlan(index)"
            v-if="workPlanVOs.length > 1"
            >删除时间段</el-button
          >
        </el-divider>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDialog">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { getList, saveBatch } from "@/api/work/plan";
import { WorkPlanVO, WorkPlanForm } from "@/api/work/plan/types";
import { getWorkerList } from "@/api/work/worker";
import { Worker } from "@/api/work/worker/types";
import { CalendarInstance, CalendarDateType } from "element-plus";
const loading = ref(false);
let workPlanVOs = ref<WorkPlanVO[]>([]);
const allWorker = ref<Worker[]>([]);
let currentDate = ref(); //当前选中的时间
const addWorkPlan = () => {
  let workPlanVO2 = new WorkPlanVO();
  workPlanVO2.timeFrom = "10:30";
  workPlanVO2.timeEnd = "18:30";
  workPlanVOs.value.push(workPlanVO2);
};
const delWorkPlan = (indexNum: number) => {
  workPlanVOs.value.splice(indexNum, 1);
  console.info(currentDate.value);
};
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length;
  console.info(value);
};

// 弹窗对象
const dialog = reactive({
  visible: false,
  type: "user-form",
  width: 600,
  title: "",
});
/**
 * 打开弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 * @param id 用户ID
 */
async function openDialog(type: string, data?: any) {
  if (workPlanVOs.value.length === 0) {
    let workPlanItem1 = new WorkPlanVO();
    workPlanItem1.timeFrom = "08:30";
    workPlanItem1.timeEnd = "18:30";
    workPlanVOs.value.push(workPlanItem1);
  }
  currentDate.value = data;
  dialog.visible = true;
  dialog.type = type;
  if (type === "add") {
    dialog.title = "新增" + currentDate.value.day + "排班";
  } else if (type === "update") {
    dialog.title = "修改";
  }
}
/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单：user-form | 用户导入：user-import
 * @param id 用户ID
 */
function closeDialog() {
  dialog.visible = false;
  if (dialog.type === "user-form") {
  } else if (dialog.type === "user-import") {
  }
}
function submitDialog() {
  dialog.visible = false;
  console.info(workPlanVOs.value);
}

const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};
function createWorkPlan(request: WorkPlanVO[]) {
  loading.value = true;
  saveBatch(request)
    .then(({ data }) => {
      console.info(data);
    })
    .finally(() => {
      loading.value = false;
    });
}
/** 查询 */
function getListRequest(request: WorkPlanVO) {
  loading.value = true;
  getList(request)
    .then(({ data }) => {
      console.info(data);
    })
    .finally(() => {
      loading.value = false;
    });
}
let viewDate: any = ref({});
onMounted(() => {
  let request = new WorkPlanForm();
  request.planMonth = new Date().toISOString().slice(0, 7); //获取年月
  getListRequest(request);
  //获取被排班人
  let requestWorker = new Worker();
  requestWorker.name = "123";
  getWorkerList(requestWorker)
    .then(({ data }) => {
      console.info(data);
      allWorker.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
});
</script>
<style>
.calendar-date {
  width: 100%;
  height: 100%;
}
.calendar-body-header {
  display: flex;
  justify-content: center;
}
.calendar-body-no {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.calendar-body-yes {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.el-calendar-day {
  --el-calendar-cell-width: 130px; /* 使用实际的宽度值替换这里的 新的宽度值 */
}
</style>
@/api/work/paln/types
